<template>
    <div class="app-MainPage">
        <div class="app-box">
            <Header></Header>
            <ListContainer></ListContainer>
            <TabBar></TabBar>
            <GoTop></GoTop>
        </div>
    </div>
</template>

<script>
import ListContainer from "pages/views/home/ListContainer"
import Header from "components/layout/Header"
import TabBar from "components/layout/TabBar"
import GoTop from "components/layout/GoTop"
import BScroll from 'better-scroll'
import axios from "utils/http"
import {Indicator,Toast} from "mint-ui";


export default {
    data(){
        return {
            result: null,
            page: 5 ,
        }
    },
    components: {
        ListContainer,
        Header,
        TabBar,
        GoTop
    },
    async created(){

        
       await axios({
            method: "get",
            url: "/home/index.html",
            params: {
                pageNo: this.page-1
            }
        }).then(res=>{
            this.result = res;
            let action = {
                type: "Recommend",
                payload: res.data.home
                }    

            this.$store.commit("Recommend/Recommend",action)   
            })

    
        // Indicator.close();

    },
    watch: {
        result(){
            let bscroll =  new BScroll(".app-MainPage",{
                pullUpLoad: {
                    threshold: 20
                },
                click: true,
                taps: true,
                scroll: true,
            });
          

            bscroll.on("pullingUp", async ()=>{
                
                if(this.page<15){
                   
                    let res = await axios({
                        method: "get",
                        url: "/home/index.html",
                        params: {
                            t: new Date().getTime(),
                            pageNo: this.page
                        }
                    })
                    let action = {
                        type: "RecommendMore",
                        payload: this.result.data.home
                    }          
            
                    // this.result.push(res)
                    // console.log("this.page",this.page)
                    
                    this.$store.commit("Recommend/RecommendMore",action) 
                    bscroll.finishPullUp(); 
                    this.page ++     
                      
                }
                 
                
                if(this.page == 15){
                    Toast({
                        message: 'Upload Complete',
                        position: 'bottom',
                        duration: 1000
                    });
                }
                
            }); 
       
        }
    },
    
}
</script>

<style lang="stylus" scoped>
    .app-MainPage
        height 100%
        display flex
        flex-direction column
        justify-content space-between
</style>